<template>
  <div class="">
    <sec-form
      :loadingProp="loadingProp"
      ref="formDataRef"
      :ruleForm="ruleForm"
      :formData="formData"
      :rules="rules"
    ></sec-form>
  </div>
</template>
<script>
import { addActiveUserApi } from "api/app/userApi";
export default {
  name: "",
  props: {},
  components: {},
  computed: {},
  data() {
    return {
      ruleForm: {},
      loadingProp: {
        confirm: false,
      },
      rules: {
        name: this.config.inputRule,
        company: this.config.inputRule,
        phone: [
          ...this.config.inputRule,
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式不对",
            trigger: "blur",
          },
        ],
        email: [
          ...this.config.inputRule,
          {
            pattern:
              /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            message: "邮箱格式不对",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.formData = [
      { type: "text", label: "姓名", prop: "name" },
      { type: "text", label: "公司", prop: "company" },
      { type: "text", label: "手机号", prop: "phone" },
      { type: "text", label: "邮箱", prop: "email" },
      { type: "textarea", label: "备注", prop: "remark" },
      {
        type: "operation",
        style: "text-align:right",
        children: [
          {
            label: "取消",
            click: () => {
              this.$emit("cancel");
            },
          },
          {
            label: "确 定",
            icon: "el-icon-tickets",
            prop: "confirm",
            click: () => {
              if (this.$refs.formDataRef.validate()) {
                this.addActiveUser();
              }
            },
          },
        ],
      },
    ];
  },
  mounted() {},
  methods: {
    addActiveUser() {
      this.loadingProp.confirm = true;
      addActiveUserApi({ ...this.ruleForm }).then((res) => {
        this.loadingProp.confirm = false;
        let state = this.message.state(res);
        if (!state) return;
        this.$emit("confirm");
      });
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped></style>
